<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
		*{margin: 0;padding: 0;}
		body,html{width: 100%;height: 100%;object-fit: fill;overflow: hidden;}
		.box{width: 100%;height: 100%;position: relative;perspective:400px;}
		.box div{position: absolute;}
		.box .main{width: 100%;height: 100%;background: url("img/bg.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;}
		.box .left{
			left: 0;
			width: 50%;
			height: 100%;
			border:1px solid blue;
			background:url("img/1.png");
			background-size: 100% 100%;
			transform-origin: left;
			animation: open-l 15s 1 forwards linear;

		}
		.box .right{
			right: 0;
			width: 50%;
			height: 100%;
			border:1px solid blue;
			background:url("img/2.png");
			background-size: 100% 100%;
			transform-origin: right;
			animation: open-r 15s 1 forwards linear;
		}
		@keyframes open-l{
			from{transform: rotateY(0deg);}
			to{transform: rotateY(-90deg);}
		}
		@keyframes open-r{
			from{transform: rotateY(0deg);}
			to{transform: rotateY(90deg);}
		}

	</style>
</head>
<body>
	<div class="box">
		<div class="main"></div>
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>
</html>